<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/element.css" />
</head>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/formDataUtils.js"></script>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }
    .el-link {
        margin-right:8px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }
    #template {
        height:100%;
    }
    /* #search .el-card__body {
        height:40px;
    } */
    #table {
        height:calc(100% - 120px);
    }
    /*翻页样式*/
    .el-pagination {
        margin-top:5px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
        background-color:whitesmoke !important;
        color: black !important;
        border: none !important;
      }
      .el-form-item label{
        text-align: left !important;
        width: 68px !important;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
</style>
<div id="template">
    <!--    用户编辑框-->
    <el-card class="box-card" id="search" >
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="所属单位">
            <el-select v-model="unit" @change="currStationChange">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option >
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-input  style="width:200px;" type="text" :disabled="true" :value=parentdeptname></el-input>
          </el-form-item>
        <el-button size="small" @click="chooseDept">选择
        </el-button>
        <el-button size="small" @click="resetDept">重置
        </el-button>
            <el-form-item label="部门名称">
              <el-input clearable placeholder="请输入部门名称" style="width:200px;" id="nName" v-model="nName" @change="setParam"></el-input>
          </el-form-item>
          <el-button size="small" @click="addNew">增加
          </el-button>
        </el-form>
</div>
<script>
  // function changeParam(param){
  //   tem.parentdeptname = param;
  // }
    Vue.config.productionTip = false;//屏蔽提示信息
    //当前编辑的场景数据
    var categoryList = parent.categoryList;
    var datetree = new Object();
    var testimg = new Object();
    var choosewindow = null;
    var choosepdeptname ='';
    var choosepdeptid = '';
    var tem = new Vue({
        el: "#template",
        data() {
            return {
              unit:'',
              categoryList:categoryList,
              nName:"",
              currentPage: 1,
              pageSize: 10,
              choosedeptid:'',
              choosedeptname:'',
              parentdeptname:'',
            }
        },
        created() {
	        this.unit = this.categoryList[0].id;
          this.getCompanydata(this.categoryList[0].id);
          // this.choosepdeptname = this.categoryList[0].name;
          // this.choosepdeptid = this.categoryList[0].id;
          this.parentdeptname = this.categoryList[0].name;
          //choosepdeptid = this.categoryList[0].id;
          choosepdeptname = this.categoryList[0].name;
         },

        watch:
        {
   
        } ,
        methods:{
            setParam(){
                parent.addept_name = this.nName;
                //console.log(parent.parent);
                //console.log(typeof(parent.parent))
                //console.log('parentdeptname'+this.parentdeptname);
            },

            resetDept()
            {
                choosepdeptid='';
                this.updated(this.unit);
            },
           //弹出选择部门窗口
           chooseDept() {
          //场景id赋值
          //打开弹窗
          if(datetree.length<1)
          {
            alert('该单位还没有部门!输入部门名添加');
            return;
          }
          let that = this;
          choosewindow=layer.open({
              type: 2,
              title: '选择部门',
              shadeClose: false,
              shade: false,
              closeBtn: true,
              maxmin: false, //开启最大化最小化按钮
              area: ['400px', '600px'],
              content: '/dialog/system/addeptchoose.html',
              cancel: function () {
                that.choosedeptid='';
                that.choosedeptname='';
                  console.log('cancel...')
        },
              end: () => {
                  //this.searchAllScene();
                  //sceneData = {};
              }
          });
      },

      
            addNew()
            {
                if(!this.nName)
                {
                  alert('未填写增加的部门名称!');
                }
                else 
                {
                      this.choosedeptid = choosepdeptid;
                      this.choosedeptname = choosepdeptname;
                      this.parentdeptname = choosepdeptname;
                      parent.addeptname = this.choosedeptname;
                      parent.addeptid = this.choosedeptid;
                      parent.companyid = this.unit;
                      //console.log('部门所属id:'+this.choosedeptid+'所属部门名称:'+this.choosedeptname);
                      //this.$forceUpdate();
                      //this.editUser(sceneId,editusername,editnickname);
                      //this.addNewCompany(addname);
                    parent.layer.close(parent.addwindow);
                }
            },

              currStationChange(val) {
                 // console.log('currStationChange', val)
                  if (val) {
                      this.getCompanydata(val);
                      this.updated(val);
                  } else {
                
                  }
              },

            updateName()
            {
                this.parentdeptname = choosepdeptname;
            } , 
            //更新数据
            updated(val)
            {
              var that = this;
              console.log('categoryList: ',categoryList);
              for (let i=0;i<categoryList.length;i++)
              {
                if(categoryList[i].id==val)
                {
                  choosepdeptid=val;
                  choosepdeptname = categoryList[i].name;
                  this.parentdeptname = choosepdeptname;
                  //console.log('选择了单位: ',choosepdeptid, choosepdeptname);
                }
              }
            },
            //获取单位部门信息
            getCompanydata(cid) {
            let that = this;
            let params = {
              companyid:cid,
              page:this.currentPage,
              size:this.pageSize,
            };
            axios
              .get("/syatem/query_dept", { params })
              .then((res) => {
                let data1 = res.data;
                //console.log(res.data);
                this.dateTreetoCompany(data1.data.content);
                //console.log(data1.data.content);
                //console.log('一共有:'+data1.data.totalElements+'条数据');
              })
              .catch((err) => {
                console.log(err);
              });
            //let datearr=[];
            //console.log('选中了:'+arr1);
            //console.log('用户类型:'+that.unit);
          },

          //将部门信息变为树形结构数据
          dateTreetoCompany(data){
          let cloneData = [...data];
          let tree = cloneData.filter((father)=>{              //循环所有项
            let branchArr = cloneData.filter((child)=>{
              return father.id == child.parent      //返回每一项的子级数组
            });
            if(branchArr.length > 0){
              father.children= branchArr
                 //如果存在子级，则给父级添加一个children属性，并赋值
            }
            return father.parent == null;      //返回第一层
          });
         // console.log(tree);
          datetree=tree;
         // return tree     //返回树形数据
      } ,
        }

    })
</script>

</html>
